import React, { useState, useRef, useEffect } from 'react'
import { Col, Row, Modal } from 'antd'
import style from './page.module.css'
import pic01 from './pic01.png'
import pic02 from './pic02.png'
import pic03 from './pic03.png'
import pic04 from './pic04.png'
import pic05 from './pic05.png'
import pic06 from './pic06.png'
import pic07 from './pic07.png'
import './style.less'
import play from './play.png'

export default function Page1() {

  const [visible, setVisible] = useState(false)
  const videoref = useRef<HTMLVideoElement>(null)
  useEffect(() => {
    const video = videoref.current
    if (video) {
      if (visible) {
        video.play()
      } else {
        video.pause()
      }
    }
  }, [visible])
  return <div >
    <Row className="page-item1 text-center" >
      <Col span={24} >
        <div className={style.center}>
          <div>
            <h3>哈工科教micro:bit赛事活动</h3>
          </div>
          <div className={style.vidoe} >
            <img onClick={(e) => setVisible(true)} src={play} className={style.videoimg} alt="" />
            <video width="825" height="486" src="https://cdn.hterobot.com/microbit/MICROBIT%E5%A4%A7%E8%B5%9B%E8%A7%86%E9%A2%9101.mp4"></video>
          </div>
          <Modal
            title={null}
            visible={visible}
            onOk={() => setVisible(false)}
            onCancel={() => setVisible(false)}
            okText="确认"
            cancelText="取消"
            width="75vw"
            footer={null}
            centered={true}
          >
            <video controls autoPlay ref={videoref} width="100%" height="100%" src="https://cdn.hterobot.com/microbit/MICROBIT%E5%A4%A7%E8%B5%9B%E8%A7%86%E9%A2%9101.mp4"></video>
          </Modal>
        </div>
      </Col>
    </Row>
    <Row>
      <Col span={24} className={style.positionrelative}  >
        <div className={style.userlist} >
          <div className={style.user}>
            <img src={pic01} alt="" />
          </div>
          <div className={style.user}>
            <img src={pic02} alt="" />
          </div>
          <div className={style.user}>
            <img src={pic03} alt="" />
          </div>
          <div className={style.user}>
            <img src={pic04} alt="" />
          </div>
          <div className={style.user}>
            <img src={pic05} alt="" />
          </div>
          <div className={style.user}>
            <img src={pic06} alt="" />
          </div>
          <div className={style.user}>
            <img src={pic07} alt="" />
          </div>
          <div className={style.user}>
            <img src={pic01} alt="" />
          </div>
          <div className={style.user}>
            <img src={pic02} alt="" />
          </div>
          <div className={style.user}>
            <img src={pic03} alt="" />
          </div>
          <div className={style.user}>
            <img src={pic04} alt="" />
          </div>
          <div className={style.user}>
            <img src={pic05} alt="" />
          </div>
          <div className={style.user}>
            <img src={pic06} alt="" />
          </div>
          <div className={style.user}>
            <img src={pic07} alt="" />
          </div>
        </div>
      </Col>
    </Row>
  </div>
}